	<!--  D:/project/app/ydz-app-uniapp/static/images/knowledge/clinicaldetail -->
	<template>
		<view class="pagebody">
			<view class="topbox">
				<NavHeader :type="1"></NavHeader>
				<view class="card">
					<view class="flex-row">
						<!-- <image
							style="border-radius: 50%;width: 152rpx;height: 152rpx;border: 8rpx solid #fff;margin-top: -64rpx;"
							:src="$config.baseUrl + doctor.url" mode=""></image> -->
						<img style="border-radius: 50%;width: 152rpx;height: 152rpx;border: 8rpx solid #fff;margin-top: -64rpx;"
							:src="$config.baseUrl + doctor.url" />
						<view class="" style="margin-left: 32rpx;">
							<view class="flex-row">
								<view class="color303b39 fz40 fwbold" style="line-height: 48rpx;">
									{{doctor.name}}
								</view>
								<view class="ml16"
									style="height: 44rpx;line-height: 44rpx;padding:0 10rpx;background: linear-gradient( 225deg, #EAFBFF 0%, #D9ECFF 100%);border-radius: 16rpx 16rpx 16rpx 0px;color: #0D6CE4;">
									{{doctor.technicalTitle}}
								</view>
							</view>
							<view style="color: #576260;margin-top: 8rpx;">
								{{doctor.hospital.hospitalName}}
							</view>
						</view>
					</view>
					<view class="pos-rel"
						style="background: #F6FAF9;height: 112rpx;width: 100%;padding: 16rpx;margin-top: 40rpx;border-radius: 24rpx;text-indent: 150rpx;font-weight: 500;font-size: 28rpx;color: #00977C;line-height: 46rpx;">
						<image src="../../static/images/knowledge/japan/zysc.png" class="pos-abs"
							style="left: 16rpx;top: 26rpx;width: 150rpx;height: 32rpx;" mode=""></image>
						{{doctor.specialty}}
					</view>

				</view>
			</view>
			<view class="content">
				<consulting></consulting>
				<view class="text pos-rel color333 fz36 fwbold">医生介绍
					<view class="botline pos-abs">
					</view>
				</view>
				<view class="context" v-html="doctor.content">

				</view>

			</view>
			<consulting></consulting>
			<HospitalList :hospitalList="hospitalList"></HospitalList>
			<view class="fwlc bgfff br16 mt16">
				<view class="head flex-row">
					<view class="headtetx ischoose" style="">
						{{doctor.hospital.hospitalName}}就医服务流程
						<view class="linebox">
						</view>
					</view>
				</view>
				<view class="lcbox" style="padding: 56rpx 27rpx 0 40rpx;">
					<view class="lcitem pos-rel" v-for="(item,index) in fwlclist" :key="index">
						<view class="pos-abs bgfff" style="width: 32rpx;height: 42rpx;left: -18rpx;top: 0rpx;">
							<view class="justify-center align-center"
								style="width: 32rpx; height: 32rpx;background: rgba(2, 183, 202, 0.10);border-radius: 50%;margin-top: 10rpx;">
								<view class="" style="width: 16rpx; height: 16rpx;background: #00D9B2;border-radius: 50%;">

								</view>
							</view>
						</view>
						<view class="fz36 fwbold" style="color: #00977C;">
							<span class="mr16">0{{index+1}}</span> {{item.title}}
						</view>
						<view class="flex-row justify-end">
							<view class="color303b39 fz32"
								style="width: 600rpx;line-height: 48rpx;font-weight: 500;height: 128rpx;padding: 16rpx 16rpx 16rpx 24rpx;background: #F6FAF9;margin-top: 24rpx;">
								{{item.content}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<consulting></consulting>

			<lyb :title="'留言板'"></lyb>
			<japanfw :type="1"></japanfw>
			<AdvCom :type='2'></AdvCom>
			<japanfw :type="2"></japanfw>
			<AdvCom :type='3'></AdvCom>
			<japanfw :type="3"></japanfw>
			<NewslistCom :head="1" :newsList="newsList"></NewslistCom>
			<FixedFoot :typeid="2"></FixedFoot>
		</view>
	</template>

	<script>
		import FixedFoot from '../../layouts/fixedfoot.vue';
		import NavHeader from '../../layouts/navheader.vue';
		import consulting from '../../components/generalcom/consulting.vue'
		import HospitalList from '../../components/generalcom/hospitallist.vue';
		import NewslistCom from '../../components/generalcom/newslistcom.vue';
		import lyb from '../../components/generalcom/lyb.vue';
		import japanfw from '../../components/generalcom/japanfw.vue';
		import AdvCom from '../../layouts/advcome.vue';
		import {
			getDoctorById,
			getHospitalList,
			selectNewsList
		} from '@/api/api.js';
		export default {
			components: {
				FixedFoot,
				NavHeader,
				consulting,
				HospitalList,
				NewslistCom,
				lyb,
				AdvCom,
				japanfw
			},
			onLoad(options) {
				//根据id获取医生详情
				this.getDoctorById(options.id);
				//查询最新新闻
				this.selectNewsList();
			},

			data() {
				return {
					doctor: {
						hospital: {
							hospitalName: ""
						}
					},
					fwlclist: [{
							title: '患者咨询及提交病历材料',
							content: '含文字病历、住院记录、影像胶片、病理切片等'
						},
						{
							title: '推荐适合患者的医院和医生',
							content: '预约国外权威医生，出具详细的海外就医分析报告'
						},
						{
							title: '撰写中、外文转诊病历',
							content: '根据医院的要求，整理、编辑与翻译材料'
						},
						{
							title: '远程MDT（非必须）',
							content: '部分患者可能需远程MDT，确定有无出国必要'
						},
						{
							title: '预约医生就医',
							content: '获取医院提供的就医邀请函、医生预约信、费用预付单等'
						},
						{
							title: '大使馆面谈，取得签证',
							content: '制定个性化签证方案，辅助准备材料，包括申请加急等'
						},
						{
							title: '机票及住宿预订、行前指导',
							content: '帮患者了解国外就医流程及就诊注意事项，提供入境指导'
						},
						{
							title: '接机，就诊及生活陪同翻译',
							content: '由多年工作经验的医学翻译，提供就医、生活指导及陪同等'
						},
						{
							title: '送机，国内病情随访',
							content: '将就医资料翻译成中文，安排回国后国外医生的定期随访等'
						},
					],
					name: '',
					phone: '',
					question: '',
					newsList: [],
					hospitalList: []
				}
			},
			methods: {
				// 根据id获取医生详情
				getDoctorById(id) {
					getDoctorById(id).then(res => {
						if (200 == res.code) {
							this.doctor = res.data
							this.hospitalList.push(this.doctor.hospital)
							this.getHospitalList()
						}
					})
				},
				getHospitalList() {
					let param = {
						"pageNum": 1,
						"pageSize": 2,
						"orderByColumn": "create_time",
						"isAsc": "desc",
					}
					getHospitalList(param).then(response => {
						if (response.rows.length) {
							let list = response.rows
							list.forEach(item => {
								this.hospitalList.push(item)
							})
						}

					})
				},
				selectNewsList() {
				let param = {
					"pageNum": 1,
					"pageSize": 4,
					"orderByColumn": "create_time",
					"isAsc": "desc"
				}

				selectNewsList(param).then(response => {
					this.newsList = response.rows
					this.newsList.forEach(item => {
						let str = item.content
						if (str) {
							let words = str.replace(/<[^<>]+>/g, "").replace(/&nbsp;/gi, "")
							str = words.replace(/\s/g, "")
							item.nostyletext = str
						}
					})

				})
				},
			}
		}
	</script>

	<style lang="scss" scoped>
		::v-deep .is-input-border {
			height: 90rpx;
			border-radius: 16rpx;
			border: 1rpx solid #D7DDDC;
		}

		::v-deep .uni-input-wrapper {
			font-size: 32rpx;
		}

		::v-deep .uni-easyinput__content-input {
			padding: 0 33rpx;
		}

		::v-deep .u-input__textarea {
			font-size: 32rpx;
			padding: 21rpx 0;
		}

		.pagebody {
			padding-bottom: 136rpx;
			background: #F0F6F5;

			.topbox {
				padding: 20rpx 24rpx;
				height: 400rpx;
				background: linear-gradient(180deg, #00D9B2 0%, rgba(0, 217, 178, 0) 100%);

				.card {
					padding: 27rpx 24rpx 37rpx;
					background: #fff;
					border-radius: 24rpx;
					margin-top: 82rpx;
					box-shadow: 1rpx 6rpx 14rpx -10rpx #01AC8D;
					height: 312rpx;
					width: 702rpx;
					z-index: 99;
					position: relative;
				}
			}

			.content {
				margin-top: 32rpx;
				padding: 68rpx 24rpx 43rpx;
				background: #fff;
				border-radius: 24rpx;

				.text {
					margin-bottom: 5rpx;
					margin-top: 32rpx;
					z-index: 9;

					.botline {
						bottom: 0;
						left: -8rpx;
						width: 160rpx;
						height: 16rpx;
						background: #00D9B2;
						border-radius: 8rpx;
						opacity: 1;
						z-index: -1;
					}
				}

				.context {
					color: #293347;
					font-size: 36rpx;
					line-height: 72rpx;
					margin-top: 16rpx;
					margin-bottom: 16rpx;
					text-indent: 36rpx;

					::v-deep h2 {
						color: #00977C;
						font-weight: bold;
						line-height: 72rpx;
						font-size: 36rpx;
						margin-top: 24rpx;
						margin-bottom: 24rpx;
						line-height: 60rpx;
					}

					::v-deep h3 {
						color: #303b39;
						font-weight: bold;
						line-height: 72rpx;
						margin-top: 16rpx;
						font-size: 36rpx;
						margin-bottom: 16rpx;
					}

					::v-deep h4 {
						color: #303b39;
						font-weight: bold;
						margin-top: 16rpx;
						line-height: 72rpx;
						font-size: 36rpx;
						margin-bottom: 16rpx;
					}

					::v-deep p {
						color: #303b39;
						font-size: 36rpx;
						line-height: 32rpx;
						line-height: 72rpx;
						margin-top: 16rpx;
						margin-bottom: 16rpx;
					}

					::v-deep a {
						font-size: 36rpx;
						color: #0078ff;
					}
				}
			}

			.fwlc {
				.head {
					height: 110rpx;
					padding: 10rpx 32rpx 0;
					border-bottom: 1px solid #D7DDDC;

					.headtetx {
						font-size: 40rpx;
						display: flex;
						align-items: center;
						height: 100rpx;
						margin-right: 40rpx;
						position: relative;

						.linebox {
							position: absolute;
							bottom: 0;
							width: -webkit-fill-available;
							height: 10rpx;
							background: #00D9B2;
							border-radius: 50rpx;
						}
					}

					.ischoose {
						color: #303B39;
						font-weight: 800;
					}

					.nochoose {
						color: #576260;
						font-weight: 400;
					}
				}

				.lcitem {
					border-left: 1rpx dashed #00D9B2;
					width: 100%;
					padding: 0 0 44rpx 24rpx;

				}
			}

			.mstw {
				border-radius: 32rpx;
				padding: 40rpx 24rpx;
			}

			.drugcard {
				margin-top: 16rpx;
				padding: 24rpx;
				background: #fff;
				border-radius: 32rpx;
			}

			.recommend {
				border-radius: 24rpx;
				margin-top: 16rpx;
				background: #fff;
				box-sizing: border-box;
				padding: 32rpx 24rpx;

				.title {
					position: relative;
					width: max-content;
					padding: 0 16rpx;

					.titleline {
						bottom: 0;
						left: 0;
						height: 16rpx;
						width: 100%;
						background: #00D9B2;
						border-radius: 50rpx;
						z-index: 1;
					}
				}

				.recomlist .recomli:last-child {
					border-bottom: none;
				}

				.recomlist {
					.recomli {
						padding: 24rpx 0;
						display: flex;
						border-bottom: 1rpx dashed #D7DDDC;

						.leftno {
							width: 30rpx;
							height: 30rpx;
							color: #fff;
							font-weight: bold;
							font-size: 24rpx;
							line-height: 30rpx;
							text-align: center;
							border-radius: 6rpx;
							flex-shrink: 0;
							margin-top: 13rpx;
							margin-right: 18rpx;
						}

						.righttext {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 36rpx;
							color: #303B39;
							line-height: 56rpx;
							text-align: left;
						}

						.noone {
							background: linear-gradient(357deg, #FC1C12 0%, #FD6F23 100%);
						}

						.notwo {
							background: linear-gradient(357deg, #FC4A14 0%, #FF9F1B 100%);
						}

						.nothree {
							background: linear-gradient(357deg, #FB7511 0%, #FECA18 100%);
						}

						.noother {
							background: #A4AFAD;
						}

					}
				}
			}

			.combodys {
				background: #fff;
				border-radius: 32rpx;
				margin-top: 16rpx;

				.head {
					height: 110rpx;
					padding: 10rpx 32rpx 0;
					border-bottom: 1px solid #D7DDDC;

					.headtetx {
						font-size: 40rpx;
						display: flex;
						align-items: center;
						height: 100rpx;
						margin-right: 40rpx;
						position: relative;
						font-weight: bold;

						.linebox {
							position: absolute;
							bottom: 0;
							width: 160rpx;
							height: 10rpx;
							background: #00D9B2;
							border-radius: 50rpx;
						}
					}
				}

				.con_div {
					box-sizing: border-box;
					padding: 32rpx 16rpx 16rpx;
					display: flex;
					flex-wrap: wrap;
					/* 使子元素换行 */

					.back_div {
						width: 343rpx;
						height: 82rpx;
						background: #EDFCF9;
						border-radius: 10px;
						font-weight: bold;
						font-size: 34rpx;
						color: #00977C;
						line-height: 82rpx;
						text-align: center;
						margin-bottom: 16rpx;

					}
				}
			}
		}
	</style>